<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>viewPage</title>
    <link rel="stylesheet" href="../../model/element.css">
    <link rel="stylesheet" href="../../model/jsFn.css">
</head>
<body>
<!--目录-->
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< viewPage ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_get">get</a></p></li>
                <li><p><a href="#jsFn_show">show</a></p></li>
                <li><p><a href="#jsFn_setLoad">setLoad</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li><p><a href="#childElement_header">header</a></p></li>
                <li><p><a href="#childElement_body">body</a></p></li>
                <li><p><a href="#childElement_footer">footer</a></p></li>
                <li><p><a href="#childElement_footer">float</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<!--标签-->
<div id="element">
    <h2>viewPage</h2>
    <div>简介:</div>
    <p>xml根标签,表示有可滑动子页面的布局</p>
</div>
<!--属性-->
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <xmp>
            <fra>
                <body>
                <page src="home.xml"/>
                <page src="user.xml"/>
                </body>
                <footer>
                    <group>
                        <button click="document.show(0)"><p>首页</p></button>
                        <button click="document.show(1)"><p>个人中心</p></button>
                    </group>
                    <script>
                        document.show(0);
                    </script>
                </footer>
            </fra>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table >
            <tbody>
            <tr>
                <th>属性</th>
                <th>值</th>
                <th>描述</th>
            </tr>
            <tr>
                <td>无</td>
                <td>无</td>
                <td>无</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>page 的src属性为子页面路径,若路径不存在会出错</p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <!--<img src="img/shequ_03.png" alt="">-->
        .....
    </div>
</div>
<!--js方法-->
<div id="jsFn">
    <h2>js方法</h2>
    <div class="jsFnModel" id="jsFn_get">
        <h3>get:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>document.get([index]) -> document</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>获得指定的子布局</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>index</p>
                    <p>&nbsp;int&nbsp;</p>
                    <p>获得第index个子布局的上下文,默认为获得当前页面的上下文</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>document</p>
            <p>子页面的上下文 <a href="../../document/index.html">参考 < document ></a></p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                //在home.xml页面或者在user.xml页面
                document.get(1).$('userName').set({cp:{p:'张三'});
                //在user.xml页面
                document.get().$('userName').set({cp:{p:'张三'});
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_show">
        <h3>show:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>document.show(index) -> null</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>展示第几个子布局</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>index</p>
                    <p>&nbsp;int&nbsp;</p>
                    <p>根据page标签的顺序</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>无</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                //展示第1个子布局
                document.show(0);
                //展示第2个子布局
                document.show(1);
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div class="jsFnModel" id="jsFn_setLoad">
        <h3>setLoad:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>document.setLoad(boolean) -> null</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>列表数据到底后展示另一种样子</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <p>无</p>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>无</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                let data = [];
                if(data.length === 0){
                    document.setLoad(true);
                }
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
</div>
<!--子标签-->
<div id="childElement">
    <h2>子标签</h2>
    <div id="childElement_header">
        <h3>header</h3>
        <p>参见 <a href="../header.html">< header ></a> </p>
    </div>
    <div id="childElement_body">
        <h3>body</h3>
        <p>参见viewPage标签下的body <a href="../frame.html">< body ></a> </p>
    </div>
    <div id="childElement_footer">
        <h3>footer</h3>
        <p>参见 <a href="../footer.html">< footer ></a></p>
    </div>
    <div id="childElement_float">
        <h3>float</h3>
        <p>参见 <a href="../float.html">< footer ></a></p>
    </div>
</div>
<div class="author">
    <p>by-草草</p>
</div>
</body>
</html>